<template>
	<!--  -->
	<view class="content" :class="content.checked?'content_active':''">
		<view class="detail" @click.stop="$emit('checkChange',content)">
			<view class="row1">
				<view style="display: flex;align-items: center">
					<text class="index">{{index+1}}</text>
					<!-- materialcode -->
					<text class="id-name">{{content.materialcode}}({{content.materialname}})</text>
				</view>
				<!-- <view class="tag">
					<u-tag plain size="mini" text="免检" type="success"></u-tag>
				</view> -->
			</view>
			<view class="row2">
				<u-row>
					<u-col span="3">单根长度:</u-col>
					<u-col span="9">{{content.singleLength}}</u-col>
				</u-row>
			</view>
			<view class="row3">
				<view class="row-content">
					<view class="col-content">
						<view>
							<view>单位</view>
							<view>{{content.unit}}</view>
						</view>
					</view>
					<view class="col-content">
						<view>
							<view>剩余数量</view>
							<view style="text-align: center;color:#F18202">{{content.qtyCount}}</view>
						</view>
					</view>
					<view class="col-content" style="align-items: center;">
						<view>
							<view style="text-align: center;">组盘数量</view>
							<view :style="{ width: inputWid(content.qty) ,textAlign:'center',margin:'0 auto'}">
								<input :maxlength="10" @click.native.stop="stop" type="number" v-model="content.qty"
									@blur="inputBlur" style="color:#F18202;border-bottom: 1rpx solid #F18202;" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view v-for="item in propArr" :key="item.code" class="item">
				<view class="item_title">{{item.title}}</view>
				<view v-if="item.code=='qty'" class="item_content">
					<view style="width:100rpx">
						<input @click.native.stop="stop" type="number" v-model="content[item.code]" @blur="inputBlur" style="border-bottom: 1rpx solid #ccc;"/>
					</view>
				</view>
				<view  v-else class="item_content">{{content[item.code]}}</view>
			</view> -->
		</view>
		<!-- <easy-picker :visible.sync="workingProcedureVisible" :list="workingProcedureList" value-field="value" label-field="label" @select="onChangeInputUser"></easy-picker> -->
	</view>
</template>

<script>
	// import EasyPicker from '@/components/EasyPicker.vue'
	export default {
		// components:{EasyPicker},
		props: {
			content: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				workingProcedureVisible: false,
				workingProcedureList: []
			}
		},
		created() {
			// this.getListbycode()
			console.log(this.title, 'title')
			console.log(this.content, 'content');
		},
		computed: {
			inputWid() {
				return function(value) {
					console.log(String(value).length, 'v');
					if (!value) {
						return '30rpx'
					} else {
						// 有内容，字符串长度*字体大小
						return (String(value).length) * 25 + 30 + 'rpx'
					}
				}
			}
		},
		methods: {
			showWorkingProcedure() {
				this.workingProcedureVisible = true
			},
			// async getListbycode(){
			// 	try{
			// 		let {data}=await listbycode({code:'process_type'})
			// 		this.workingProcedureList=data
			// 	}catch(e){
			// 		//TODO handle the exception
			// 		console.log(e);
			// 	}

			// },
			onChangeInputUser(val, valObj, index) {
				this.$emit('changeWPCurrent', val)
			},
			inputBlur({
				detail
			}) {
				const {
					value
				} = detail
				if (value > this.content.qtyCount) {
					this.content.qty = this.content.qtyCount
				} else {
					this.content.qty = parseInt(value)
				}
			},
			stop(e) {
				if (e) {
					e.stopPropagation()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #fff;
		width: 96%;
		margin: 18rpx auto;
		border: 1rpx solid #fff;
		display: flex;
		align-items: center;
		padding: 5rpx 5rpx 8rpx;
		font-size: 30ont30ize-common;

		.detail {
			box-sizing: border-box;
			flex: 1;

			.row1 {
				display: flex;
				justify-content: space-between;
				margin: 5rpx 0;

				.index {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					background-color: $color-common;
					text-align: center;
					color: #fff;
					margin-right: 10rpx;
					line-height: 40rpx;
				}

				.id-name {
					font-weight: 700;
					font-size: 30rpx;
				}
			}

			.row2,
			.row3 {
				color: #bbb;
				font-size: 30rpx;

				.row-content {
					display: flex;
					align-items: flex-start;

					.col-content {
						width: 25%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
					}
				}
			}

			.row2{
				margin:8rpx 0;
			}
		}
	}

	.content_active {
		border: 1rpx solid #F18202 !important;
	}

	::v-deep uni-input {
		font-size: $fontsize-common;
	}
</style>